<template>
  <div>
    <a-alert
      style="height: 60px; margin: 20px 0"
      message="无效会员指个人会员注册后未创建简历、企业会员未完善企业资料的会员信息"
      banner
    />
    <a-card title="会员列表">
      <p style="display: flex">
        <a-space>
          <a-select
            ref="select"
            v-model:value="filterform.status"
            style="width: 150px"
            :options="options8"
            @change="handleChange8"
          >
          </a-select>
          <a-select
            ref="select"
            v-model:value="filterform.status"
            style="width: 150px"
            :options="options1"
            @change="handleChange"
          >
          </a-select>
          <a-select
            ref="select"
            v-model:value="value2"
            style="width: 150px"
            :options="options2"
            @focus="focus2"
            @change="handleChange1"
          >
          </a-select>
          <a-select
            ref="select"
            v-model:value="value3"
            style="width: 150px"
            :options="options3"
            @focus="focus3"
            @change="handleChange2"
          >
          </a-select>
          <a-select
            ref="select"
            v-model:value="filterform.platform"
            style="width: 150px"
            :options="options4"
            @focus="focus4"
            @change="handleChange"
          >
          </a-select>
          <a-select
            ref="select"
            v-model:value="value5"
            style="width: 150px"
            :options="options5"
            @focus="focus5"
            @change="handleChange4"
          >
          </a-select>
          <a-select
            ref="select"
            v-model:value="value6"
            style="width: 150px; margin-right: 140px"
            :options="options6"
            @focus="focus6"
            @change="handleChange5"
          >
          </a-select>
        </a-space>
        <a-input-group compact>
          <a-select v-model:value="value7" style="width: 130px">
            <a-select-option value="UID">UID</a-select-option>
            <a-select-option value="用户名">用户名</a-select-option>
            <a-select-option value="手机号">手机号</a-select-option>
            <a-select-option value="姓名">姓名</a-select-option>
          </a-select>
          <a-input-search
            v-model:value="svalue"
            enter-button
            style="width: 260px"
            @search="onSearch"
          />
        </a-input-group>
      </p>
      <a-table
        :row-selection="rowSelection"
        :columns="columns"
        :data-source="data"
      >
        <template #utype="{ record }">
          <span v-if="record.utype == 1">企业会员</span>
          <span v-else-if="record.utype == 2">个人会员</span>
        </template>
        <template #status="{ record }">
          <a-button type="primary" v-if="record.status == 1">正常</a-button>
          <a-button
            style="width: 65px; height: 35px"
            v-else-if="record.status == 0"
            >已锁定</a-button
          >
        </template>
        <template #cz>
          <a-button>管理</a-button>&nbsp;&nbsp;<a-button type="primary"
            >查看</a-button
          >&nbsp;&nbsp;<a-button type="primary">修改</a-button>
        </template>
        <template #reg_time="{ record }">
          <HistoryOutlined /> {{ timestampToTime(record.reg_time) }}
        </template>
        <template #deng="{ record }">
          <span v-if="record.last_login_time == 0"> 从未登录 </span>
          <span v-else-if="record.last_login_time">
            <HistoryOutlined /> {{ timestampToTime(record.last_login_time) }}
          </span>
        </template>
      </a-table>
      <a-button @click="showModal">添加</a-button>
      <a-modal
        v-model:visible="visible"
        title="添加【企业】会员"
        :footer="false"
      >
        <a-form :model="addform">
          <a-form-item label="用户名">
            <a-input v-model:value="addform.username"></a-input>
          </a-form-item>
          <a-form-item label="手机号">
            <a-input v-model:value="addform.mobile"></a-input>
          </a-form-item>
          <a-form-item label="密码  ">
            <a-input v-model:value="addform.pwd"></a-input>
          </a-form-item>
          <a-from-item>
            <a-button @click="addcom" type="primary">确认</a-button>
          </a-from-item>
        </a-form>
      </a-modal>
    </a-card>
  </div>
</template>

<script setup>
import { defineComponent, ref, onMounted, reactive } from "vue";
import { HistoryOutlined } from "@ant-design/icons-vue";
import { useStore } from "vuex";
const store = useStore();
const columns = [
  {
    title: "UID",
    dataIndex: "id",
    key: "uid",
    // 这里设置字段的插槽
  },
  {
    title: "用户名",
    dataIndex: "username",
    key: "username",
  },
  {
    title: "身份类型",
    key: "utype",
    slots: { customRender: "utype" },
  },
  {
    title: "手机号",
    dataIndex: "mobile",
    key: "mobile",
  },
  {
    title: "注册时间",
    key: "reg_time",
    slots: { customRender: "reg_time" },
  },
  {
    title: "最近登陆",
    key: "logintime",
    slots: { customRender: "deng" },
  },
  {
    title: "会员状态",
    key: "status",
    slots: { customRender: "status" },
  },
  {
    title: "操作",
    key: "cz  ",
    slots: { customRender: "cz" },
  },
];
const data = ref([]);
const timestampToTime = (timestamp) => {
  console.log(timestamp);
  if(timestamp){
    let a=timestamp.split('T')
    return a[0]+' '+a[1].split('.')[0]
  }else{
    return '2022-11-29 8:0:0'
  }
  // 
  
};
const value1 = ref("");
const value2 = ref("按注册时间排序");
// 注册时间
const value3 = ref("");
// 注册来源
const value4 = ref("");
// 微信
const value5 = ref("");
// 邮箱
const value6 = ref("");
const value7 = ref("UID");
const value8 = ref("");

const options8 = ref([
  { value: "", label:"不限身份" },
  { value: "企业会员", label:"企业会员" },
  { value: "个人会员", label:"个人会员" },
]);
const options1 = ref([
  {
    value: "",
    label: "不限会员状态",
  },
  {
    value: false,
    label: "已锁定",
  },
]);
const options2 = ref([
  {
    value: "按注册时间排序",
    label: "按注册时间排序",
  },
  {
    value: "按登录时间排序",
    label: "按登录时间排序",
  },
]);
const options3 = ref([
  {
    value: "",
    label: "不限注册时间",
  },
  {
    value: "3",
    label: "3天内",
  },
  {
    value: "7",
    label: "7天内",
  },
  {
    value: "15",
    label: "15天内",
  },
  {
    value: "30",
    label: "30天内",
  },
]);
const options4 = ref([
  {
    value: "",
    label: "不限注册来源",
  },
  {
    value: "APP",
    label: "APP",
  },
  {
    value: "手机浏览器",
    label: "手机浏览器",
  },
  {
    value: "微信浏览器",
    label: "微信浏览器",
  },
  {
    value: "微信小程序",
    label: "微信小程序",
  },
  {
    value: "抖音小程序",
    label: "抖音小程序",
  },
  {
    value: "电脑浏览器",
    label: "电脑浏览器",
  },
]);
const options5 = ref([
  {
    value: "",
    label: "不限微信绑定",
  },
  {
    value: "已绑定微信",
    label: "已绑定微信",
  },
  {
    value: "未绑定微信",
    label: "未绑定微信",
  },
]);
const options6 = ref([
  {
    value: "",
    label: "不限邮箱绑定",
  },
  {
    value: "未绑定邮箱",
    label: "未绑定邮箱",
  },
]);
const focus = () => {
  console.log("focus");
};
const handleChange = async () => {
  await getcomlist(filterform);
};
const focus2 = () => {
  console.log("focus");
};
const handleChange1 = () => {
  // if(va)
};
const focus3 = () => {
  console.log("focus");
};
const handleChange2 = () => {
  if (value3.value) {
    let da = new Date().getTime();
    let a = data.value.filter((item) => {
      return (
        Math.floor((da - item.reg_time * 1000) / 86400000) <
        parseInt(value3.value)
      );
    });
    data.value = a;
  } else {
    data.value = data1.value;
  }
};
const focus4 = () => {
  console.log("focus");
};
const handleChange4 = (value) => {
  console.log(`selected ${value}`);
};
const focus5 = () => {
  console.log("focus");
};
const handleChange5 = (value) => {
  console.log(`selected ${value}`);
};
const focus6 = () => {
  console.log("focus");
};
const handleChange6 = (value) => {
  console.log(`selected ${value}`);
};
const handleChange8 = (value) => {
  console.log(`selected ${value}`);
};
const svalue = ref("");
const onSearch = (usearch) => {
  console.log("user select ", usearch);
  console.log(svalue.value);
};

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      "selectedRows: ",
      selectedRows
    );
  },
  getCheckboxProps: (record) => ({
    disabled: record.name === "Disabled User",
    // Column configuration not to be checked
    name: record.name,
  }),
};
let filterform = reactive({
  list_style: "3",
  status: "",
  platform: "",
});
const getcomlist = () => {
  store
    .dispatch("user/getcomlist", filterform)
    .then((e) => {
      data.value = e.data;
      console.log(e.data, 0);
    })
    .catch((e) => {
      console.log("chucuo", e);
    });
};
let addform = reactive({
  utype: "1",
  username: "",
  mobile: "",
  pwd: "",
  companyname: "12",
  list_style: "3",
});
const addcom = () => {
  if (
    addform.utype &&
    addform.username &&
    addform.companyname &&
    addform.list_style
  ) {
    store
      .dispatch("user/addcom", addform)
      .then(async (e) => {
        await getcomlist();
        addform.username = "";
        addform.pwd = "";
        addform.mobile = "";
      })
      .catch((e) => {});
  }
  visible.value = false;
  getcomlist();
};
const visible = ref(false);

const showModal = () => {
  visible.value = true;
};
onMounted(() => {
  getcomlist();
});
</script>

<style scoped>
</style>